

<script>

export default {
    data(){
        return{
            viewer:undefined,
        }
    },
    beforeMount(){
        this.viewer = this.$store.state.viewer
    },
    mounted(){
        this.initWork()
    },
    methods:{
       async initWork() {
            var configdata = this.viewer.zz.getConfig();
            delete configdata.navigation;
            delete configdata.location;
            //切换默认显示的底图
            for (var i = 0, len = configdata.basemaps.length; i < len; i++) {
                var item = configdata.basemaps[i];
                if (item.type == "group" && item.layers == null) continue;

                if (!item.visible) {
                    item.visible = true;
                    break;
                }
            }
            //用于双屏同图层，不同配置展示
            for (var j = 0,  len_ = configdata.operationallayers.length; j < len_; j++) {
                var item_ = configdata.operationallayers[i];
                if (item_.compare) { //存在compare属性时
                    for (var key in item_.compare) {
                        item_[key] = item_.compare[key];
                    }
                }
            }
            var opts = configdata;
            opts.homeButton = false;
            opts.geocoder = false;
            opts.sceneModePicker = false;
            opts.navigationHelpButton = false;
            opts.vrButton = false;
            opts.fullscreenButton = false;
            opts.baseLayerPicker = true;

            var viewerDom = document.getElementById('cesiumContainer');
            viewerDom.style.width = '50%'
            var viewerExDom = document.createElement('div');
            viewerExDom.id = 'cesiumContainerEx';
            viewerDom.parentNode.insertBefore(viewerExDom, viewerDom.nextSibling);
            viewerExDom.style.width = '50%'
            viewerExDom.style.position = 'absolute';
            viewerExDom.style.left = '50%';
            viewerExDom.style.top = '0%';
            viewerExDom.style.height = '100%';
            viewerExDom.style.width = '50%';

            await zz3d.createMapEx("cesiumContainerEx", opts).then(v => {
                this.viewerEx = v;
            });
            
            this.viewer.scene.morphComplete.addEventListener( ()=> { //切换场景前事件 
                if (this.viewer.scene.mode === Cesium.SceneMode.SCENE2D) {
                    this.viewerEx.scene.screenSpaceCameraController.enableTilt = false;
                } else {
                    this.viewerEx.scene.screenSpaceCameraController.enableTilt = true;
                }
            });


            this.viewer.camera.changed.addEventListener(this._map_extentChangeHandler);
            this.viewer.camera.percentageChanged = 0.01;

            this.viewerEx.camera.changed.addEventListener(this._mapEx_extentChangeHandler);
            this.viewerEx.camera.percentageChanged = 0.01;

            this._map_extentChangeHandler(this.viewer,this.viewerEx);
        },
       _map_extentChangeHandler() {
            this.viewerEx.camera.changed.removeEventListener(this._mapEx_extentChangeHandler);
            this.updateView(this.viewer, this.viewerEx);
            this.viewerEx.camera.changed.addEventListener(this._mapEx_extentChangeHandler);
        },
        _mapEx_extentChangeHandler() {
            this.viewer.camera.changed.removeEventListener(this._map_extentChangeHandler);
            this.updateView(this.viewerEx, this.viewer);
            this.viewer.camera.changed.addEventListener(this._map_extentChangeHandler);
        },
        //“变化屏”viewerChange变化，将“被更新屏”viewerUpdate同步更新
        updateView(viewerChange, viewerUpdate) {
            var point = zz3d.point.getCameraView(viewerChange);
            viewerUpdate.camera.setView({
                destination: Cesium.Cartesian3.fromDegrees(point.x, point.y, point.z),
                orientation: {
                    heading: Cesium.Math.toRadians(point.heading),
                    pitch: Cesium.Math.toRadians(point.pitch),
                    roll: Cesium.Math.toRadians(point.roll)
                }
            });
        },
    },
    destroyed(){
        document.getElementById('cesiumContainer').style.width = '100%';
        var viewerExDom = document.getElementById('cesiumContainerEx');
        if (viewerExDom && viewerExDom.parentNode) {
            viewerExDom.parentNode.removeChild(viewerExDom);
        }
    }
}
</script > 